<template>
  <div class="edit-note">
    <div class="header">更新事项</div>
    <AddEditNote v-model:new-note="noteContent" v-model:new-title="noteTitle" placeholder="编辑事项">
      <template #buttons>
        <button @click="$router.back()" class="button is-link has-background-success mr-4">
          取消
        </button>
        <button :disabled="!noteContent || !noteTitle" @click="handleSaveNote"
          class="button is-link has-background-success">
          保存
        </button>
      </template>
    </AddEditNote>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import AddEditNote from '@/components/notes/AddEditNote.vue'
import { useNotesStore } from '@/stores'

const noteContent = ref(null);
const noteTitle = ref(null);

const route = useRoute()
const router = useRouter()

const store = useNotesStore()
const { getContentById, saveNote } = store

noteTitle.value = getContentById(route.params.id).value.title;
noteContent.value = getContentById(route.params.id).value.content;

const handleSaveNote = () => {
  saveNote(route.params.id, noteContent.value, noteTitle.value)
  router.push('/')
};
</script>

<style lang="scss" scoped>
.header {
  font-family: 'Times New Roman', Times, serif;
  font-weight: bold;
  font-size: x-large;
  color: hsl(141, 53%, 53%);
  text-align: center;
}

button {
  border: 0;
}
</style>